<template>
  <div class="page appraisal-page">
    <nav-bar :title="assessmentInfo.assessmentName" border></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <div class="require-detail-head">
        <div class="require-detail-head__box">
          <p class="require-detail-head__box__fraction">
            {{ assessmentInfo.score }}
            <span class="require-detail-head__box__text">分</span>
          </p>
          <img src="@/assets/images/routine/appraisal/fraction.png" />
        </div>
        <div class="require-detail-head__grade">
          <span>总分：{{ assessmentInfo.fullScore }}</span>
          <span class="require-detail-head__grade__right">等级：优秀</span>
        </div>
        <div class="require-detail-head__comment">
          <p class="require-detail-head__comment__p1">领导点评:</p>
          <p class="require-detail-head__comment__p2">
            {{ assessmentInfo.comment }}
          </p>
        </div>
        <div class="require-detail-head__date">
          <p>考评时间：{{ assessmentInfo.startTime }}</p>
        </div>
      </div>
      <div class="require-detail-radius"></div>
      <div class="table-list">
        <div class="table-list-head">
          <van-row>
            <van-col :span="7">考核项目</van-col>
            <van-col :span="11" align="center">考核要求</van-col>
            <van-col :span="6" align="center">项目分值</van-col>
          </van-row>
        </div>
        <template v-if="requireData.length">
          <div v-for="(item, key) in requireData" :key="key">
            <div class="table-list-row" :class="key % 2 ? 'table-list-row__even' : 'table-list-row__odd'">
              <van-row type="flex">
                <van-col :span="7" @click="changeRole(item, key)">
                  <p class="van-ellipsis" :class="item.show ? 'color2' : 'color1'">{{ item.name }}</p>
                </van-col>
                <van-col :span="11">
                  <p class="van-ellipsis table-list-row__center">{{ item.requirement }}</p>
                </van-col>
                <van-col :span="6" align="center">
                  <p class="van-ellipsis table-list-row__center">{{ item.score }}</p>
                </van-col>
              </van-row>
            </div>
            <transition name="van-fade">
              <div class="table-list-rule" v-if="item.show">
                <!-- <van-row> -->
                <!-- <van-col :span="24"> -->
                <p class="table-list-rule__text">
                  扣分规则：
                  <span>{{ item.deductionRule }}</span>
                </p>
                <!-- </van-col>
                  <van-row>
                    <van-col :span="24"> -->
                <p class="table-list-rule__text">
                  内容说明：
                  <span>{{ item.cotentDescription }}</span>
                </p>
                <!-- </van-col> -->
                <!-- </van-row> -->
                <!-- </van-row> -->
              </div>
            </transition>
          </div>
        </template>
        <template v-else>
          <div class="table-list-row table-list-row__old">
            <van-row type="flex">
              <van-col :span="24"><div class="table-list-row__nodata">暂无数据</div></van-col>
            </van-row>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import Routine from '@/api/routine'
import { formatTimes } from '@/libs/tool'
export default {
  data() {
    return {
      title: '东城区2021年月绩效考核',
      assessmentInfo: {},
      requireData: []
    }
  },
  created() {
    this.getDetail()
  },
  mounted() {},
  methods: {
    changeRole(item, key) {
      this.$set(this.requireData[key], 'show', !item.show)
    },
    getDetail() {
      Routine.Appraisal.detail({
        assessmentCode: this.$route.query.assessmentCode,
        assessmentTime: this.$route.query.assessmentTime || formatTimes.formatDate(new Date())
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.assessmentInfo = data.assessmentInfo
          if (data.assessmentProjectInfo.length > 0) {
            for (var i = 0; i < data.assessmentProjectInfo.length; i++) {
              data.assessmentProjectInfo[i].show = false
            }
          }
          this.requireData = data.assessmentProjectInfo
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/routine/appraisal/detail.less';
@import '~@/assets/style/table.less';
</style>
